<template>
	<view
		class="container"
		:style="{
			paddingTop: safeHeight + 'px',
			paddingBottom: safeBottomHeight + 'px',
			backgroundColor: pageColor,
			minHeight: `calc(100vh - ${safeHeight || 0}px - ${
				safeBottomHeight || 0
			}px)`,
			backgroundImage: pageImage ? `url(${pageImage})` : ''
		}"

	>
		<!-- 导航栏 -->
		<u-navbar
			:titleStyle="{
				fontSize: '36rpx',
				color: titleColor,
				fontWeight: '500',
				width: '330rpx'
			}"
			:title="title"
			:bgColor="navColor"
		>
			<!-- 返回按钮 -->
		</u-navbar>
		
		<slot></slot>
	</view>
</template>

<script>
import { mapState } from 'vuex';
// 隐藏上方跳转按钮的的页面
import BackBtn from './BackBtn.vue';
const tabConfig = null
export default {
	name: 'Container',
	components: {
		BackBtn
	},
	created() {
		this.windowInfo = uni.getWindowInfo();
	},
	// mounted() {
	// 	// 如果当前页数为1则不显示返回按钮

	// 	this.setTabList();
	// 	if (this.tabType === 'index') {
	// 		this.updateCurrentIndex();
	// 	}
	// },

	props: {
		pageParams: {
			type: Object,
			default: () => ({})
		},
		// 页面背景图
		// 绿变粉渐变
		// :pageImage="$setHttpStatic('index/bg_common.png')"
		// 绿变紫渐变
		// :pageImage="$setHttpStatic('index/bg_index.png')"
		pageImage: {
			type: String,
			default: ''
		},
		btnType: {
			type: String,
			default: 'index'
		},
		//  index:首页 businessCard：名片
		tabType: {
			type: String,
			default: ''
		},
		// 导航背景颜色
		navColor: {
			default: 'transparent'
		},
		// 标题颜色
		titleColor: {
			type: String,
			default: '#222222'
		},
		// 页面颜色
		pageColor: {
			default: '#FFFFFF'
		},
		// 左侧icon大小
		leftIconSize: {
			type: Number,
			default: 16
		},
		// 展示导航栏的内边距
		showNavPadding: {
			type: Boolean,
			default: true
		},
		// 展示底部的内边距
		showBottomPadding: {
			type: Boolean,
			default: false
		},

		// 展示下方的tab
		showTabbar: {
			type: Boolean,
			default: false
		},
		// 标题
		title: {
			type: String,
			default: '标题'
		},
		leftIconColor: {
			type: String,
			default: '#222222'
		},
		showBottomSlot: {
			type: Boolean,
			default: true
		}
	},
	options: { styleIsolation: 'shared' },
	data() {
		return {
			clickStamp: null,
			// 窗口信息
			windowInfo: null,
			// 当前tab index
			currentTab: 0,
			// 是否展示左上角的按钮
			showNavBtn: false,
			tabList: [],
			currentShowTabbar: false,
			tabConfig
		};
	},
	watch: {
		showTabbar: {
			handler(val) {
				this.currentShowTabbar = val;
			},
			immediate: true
		}
		// isCustomerPage() {
		// 	// 强制刷新下方tab组件
		// 	this.setTabList();
		// 	this.updateCurrentIndex();
		// }
	},
	computed: {
		...mapState(['isCustomerPage', 'userInfo']),
		// 顶部内边距
		safeHeight() {
			const containerTabHeight = this.$scopedSlots['container-tab']
				? 44
				: 0;
			return this.showNavPadding
				? containerTabHeight + this.windowInfo.statusBarHeight + 44
				: this.windowInfo.statusBarHeight;
		},
		// 设置底部高度
		safeBottomHeight() {
			// 如果需要展示tab或者展示底部边距
			return this.showTabbar || this.showBottomPadding
				? this.windowInfo.safeAreaInsets?.bottom + 50
				: 0;
		}
	},
	methods: {
			// 第一次点击触发一次
	}
};
</script>

<style lang="scss" scoped>
.container-tab ::v-deep .u-tabs {
	&__wrapper__nav__line {
		bottom: 0;
	}
}
.container {
	// filter: brightness(0.2);

	background-size: 100%;
	background-repeat: no-repeat;
	min-height: calc(100vh);

	.container-tab {
		background-color: #ffffff;
		z-index: 1;
	}

	.container-bg {
	}

	.u-page__item__slot-icon {
		width: 56rpx;
		height: 56rpx;
	}
}
</style>
